<!--
* @author 肖阳
* @time 2020-9-10
* @dec 生成流程绘制 基本节点(审批 抄送)组装逻辑
*  组装
-->
<script>
    import AddNodeBtn from "@/components/DrawFlow/src/components/AddNodeBtn";
    import RowFactory from "@/components/DrawFlow/src/components/DrawRow/FactoryRow";

    import {
        RowNode,
        ConditionNode,
        CopyNode,
        WireRope
    } from "./components/NodeConfigFactory/NodeFactory";
    import {deepClone} from "@/common/utils";
    import FlowFactory from "./components/factory";
    import {HashCode, transToTreeDat} from "./utils";
    import FlowNode from "@/components/DrawFlow/src/components/DrawRow/FlowNode";
    import {NextNode} from "@/components/DrawFlow/src/components/DrawAddSelectBox/NextNode";

    export default {
        name: "FactoryDrawFlow",
        components: {
            AddNodeBtn,
            FlowNode
        },
        props: {
            // 流程图信息
            FlowConfig: {
                type: Array,
                default() {
                    return [];
                }
            },
            // 流程工序信息
            ProcessData: {
                type: Object,
                require: true,
                default() {
                    return {
                        // 表示当前工艺流程是否完成填充
                        finished: false,
                    };
                },
            }
        },

        created() {
            this.init();
            // 绑定事件————父组件会主动触发这些事件
            this.$on('selectFinished', function (selectItem, belongNode) {
                // 通知子组件流程选择完毕, 接下来查看流程是否填充进去
                if(this.ProcessData.finished === true){
                    this.createNextNode(selectItem, belongNode);
                    // 同时触发子组件，使btn切换为 "工艺流程" 样式
                    this.$refs['add'].$emit("selectFinished", this.ProcessData);
                }
            });
            // this.creatBusNodeChange();  // 可用事件派发
        },

        data() {
            return {
                selfConfig: null,
                currentNode: null,
                //缓存数据
                cacheData: null
            };
        },

        methods: {
            // 节点数据变化事件
            nodeChange(node) {
                this.currentNode.title = node.title;
                this.selfConfig.forEach(i => {
                    if (i.id === this.currentNode.id) {
                        i.data = node.data;
                        i.title = node.title;
                    }
                });
                this.$forceUpdate();
            },

            /**
             * 添加条件框
             */
            addBranch(node) {
                let newNode = new CopyNode(node[0]);
                this.selfConfig = this.selfConfig.concat([newNode]);
            },

            // 事件派发
            creatBusNodeChange() {
                // EventBus.$on("nodeChange", this.nodeChange);
            },

            /**
             * 获取传参数据结构
             */
            getResData() {
                let list = JSON.parse(JSON.stringify(this.selfConfig));
                this.transformTree(list);
                return list;
            },

            /**
             * 初始化 数据私有化
             */
            init() {
                this.selfConfig = deepClone(this.FlowConfig);
            },

            /**
             *  @param data  源数组一维数组
             *  @requires  tree 二维数组
             */
            transformTree(data) {
                return transToTreeDat(data);
            },

            // 获取下一节点
            getNextBox(selectItem, belongNode) {
                const nodeConfig = belongNode;
                if (selectItem.value === "流转至") {
                    belongNode.isFlowTo = true;
                }
                let {id, prevId, type, isRow, title, content} = Object.assign(nodeConfig, selectItem);
                return new NextNode({id, prevId, type, isRow, title, content});
            },

            // 创建下一级节点
            createNextNode(selectItem, belongNode){
                // 获取下一个节点
                let nextNode = this.getNextBox(selectItem, belongNode);
                let {node, selfConfig} = this.getNodeFactory(nextNode);
                this.selfConfig = selfConfig.concat(node);
            },

            // 接收子组件发送的选择选项卡的事件通知
            clickSelectBox(selectItem, belongNode) {
                // 转发事件通知给顶层父组件
                this.$emit("clickSelectBox", selectItem, belongNode);
            },

            // 根据isRow去判断row或者rol
            getNodeFactory(nextNode) {
                if (!nextNode.isRow) {
                    let {node, selfConfig} = this.getColNode(nextNode);
                    return {node, selfConfig};
                } else {
                    let {node, selfConfig} = this.getRowNode(nextNode);
                    return {node, selfConfig};
                }
            },

            // 获取row节点
            getRowNode(nextNode) {
                let node = [new WireRope(nextNode)];
                let selfConfig = this.repickArr(node[0]);
                return {node, selfConfig};
            },

            // 获取col节点
            getColNode(nextNode) {
                let groupId = HashCode();
                let node = [
                    new ConditionNode({groupId, ...nextNode}),
                    new ConditionNode({groupId, ...nextNode})
                ];
                let repickConfig = {
                    groupId: node[0].groupPid,
                    id: node[0].id
                };
                let selfConfig = this.repickArr(repickConfig);
                this.locationScroll();
                return {node, selfConfig};
            },

            // 定位滚动条
            locationScroll() {
                // window.location.hash = ".bottom-right-cover-line";
                let el = document.getElementsByClassName("dingflow-design")[0];
                setTimeout(() => {
                    el.scrollLeft = el.scrollWidth - el.clientWidth + 340;
                }, 0);
            },

            // 重定位数组
            repickArr(repickConfig) {
                let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
                selfConfig.forEach(i => {
                    if (i.isRow) {
                        if (i.groupId === repickConfig.groupId) {
                            i.groupId = repickConfig.id;
                        }
                    } else {
                        if (i.groupPid === repickConfig.groupId) {
                            i.groupPid = repickConfig.id;
                        }
                    }
                });
                return selfConfig;
            },

            // 点击节点
            clickNode(nodeConfig) {
                this.currentNode = nodeConfig;
                this.$emit("clickNode", nodeConfig);
            },

            //点击关闭节点
            closeNode(node) {
                let repickConfig = {};
                if (node.isRow) {
                    repickConfig.groupId = node.groupId;
                    repickConfig.id = node.id;
                    let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
                    console.log("selfConfigselfConfigselfConfig", selfConfig);
                    this.selfConfig = this.deleteNode(selfConfig, node);
                    this.repickDeleteArr(repickConfig);
                } else {
                    this.deleteColNode(node);
                }
            },

            // 删除节点
            deleteNode(selfConfig, node) {
                selfConfig = selfConfig.map(i => i.id !== node.id && i).filter(Boolean);
                return selfConfig;
            },

            //单独删除col下node
            deleteColNode(node) {
                let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
                let nodeArr = selfConfig.filter(
                    i => i.groupId === node.groupId && !i.isRow
                );
                let deleteArr = [];
                let repickConfig;
                if (nodeArr.length > 2) {
                    //递归删除所有关联子节点
                    deleteArr = [node];
                    this.deleteLoop(selfConfig, node, deleteArr);
                    repickConfig = {
                        id: node.id,
                        groupId: node.groupId
                    };
                } else {
                    //删除整个group
                    let allCol = selfConfig
                        .map(i => i.groupId === node.groupId && !i.isRow && i)
                        .filter(Boolean);
                    deleteArr = allCol;
                    allCol.forEach(i => {
                        this.deleteLoop(selfConfig, i, deleteArr);
                    });
                    repickConfig = {
                        id: node.groupId,
                        groupId: node.groupPid
                    };
                }
                deleteArr.forEach(i => {
                    selfConfig = this.deleteNode(selfConfig, i);
                });
                this.selfConfig = selfConfig;
                this.repickDeleteArr(repickConfig);
                return selfConfig;
            },

            // 循环遍历删除组下关联节点
            deleteLoop(selfConfig, node, deleteArr) {
                console.log(selfConfig, node, "selfConfig");
                let currentDeleteArr = selfConfig.filter(i => {
                    if (i.isRow) {
                        return i.groupId === node.id;
                    } else {
                        return i.groupPid === node.id;
                    }
                });
                if (currentDeleteArr.length) {
                    currentDeleteArr.forEach(i => {
                        deleteArr.push(i);
                        this.deleteLoop(selfConfig, i, deleteArr);
                    });
                } else {

                }
            },

            //判断是否是row
            judgeNodeIsRow(node) {
                return node.isRow;
            },

            //删除后重组数组
            repickDeleteArr(repickConfig) {
                let selfConfig = JSON.parse(JSON.stringify(this.selfConfig));
                selfConfig.forEach(i => {
                    if (i.isRow && i.groupId === repickConfig.id) {
                        i.groupId = repickConfig.groupId;
                    } else if (!i.isRow && i.groupPid === repickConfig.id) {
                        i.groupPid = repickConfig.groupId;
                    }
                });
                this.selfConfig = selfConfig;
                console.log(selfConfig, repickConfig, "groupPid");
            },

            //绘制 body
            drawBody(h, node) {
                if (node.childNode) {
                    return FlowFactory.getFactory.bind(this, h, node.childNode)();
                } else {
                    return (<div> </div>);
                }
            }
        },
        destroyed() {
            // EventBus.$off("nodeChange");
        },

        render(h) {
            let FlowConfig = JSON.parse(JSON.stringify(this.selfConfig));
            FlowConfig = this.transformTree(FlowConfig);
            this.cacheData = FlowConfig;
            const root = JSON.parse(JSON.stringify(this.selfConfig[0]));
            return (
                <div class = "design-engine" >
                    <div class = "dingflow-design" >
                        <div class = "ie-polyfill-container" >
                            <div class = "box-scale" id = "box-scale" >
                                {RowFactory.nodeWrapRender.bind(this, h, root)()}
                                {this.drawBody(h, FlowConfig[0])}
                                <div class = "end-node" >
                                    <div class = "end-node-circle" ></div>
                                    <div class = "end-node-text" >流程结束</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    };
</script>

<style scoped lang="less">
    .design-engine {
        position: relative;
        height: 100%;

        .dingflow-design {
            width: 100%;
            // background-color: #f5f5f7;
            overflow: auto;
            height: 100%;
            position: relative;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;

            /deep/ .ant-popover-arrow {
                display: none !important;
            }

            .ie-polyfill-container {
                display: -ms-grid;
                -ms-grid-columns: min-content;

                .box-scale {
                    transform: scale(1);
                    display: inline-block;
                    position: relative;
                    width: 100%;
                    padding: 54.5px 0;
                    -webkit-box-align: start;
                    -ms-flex-align: start;
                    align-items: flex-start;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                    min-width: -webkit-min-content;
                    min-width: -moz-min-content;
                    min-width: min-content;
                    // background-color: #f5f5f7;
                    -webkit-transform-origin: 0 0 0;
                    transform-origin: 50% 0px 0px;

                    // 结束节点的样式
                    .end-node {
                        border-radius: 50%;
                        font-size: 14px;
                        color: rgba(25, 31, 37, 0.4);
                        text-align: left;

                        .end-node-circle {
                            width: 10px;
                            height: 10px;
                            margin: auto;
                            border-radius: 50%;
                            background: #dbdcdc;
                        }

                        .end-node-text {
                            margin-top: 5px;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
</style>
